<template>
  <div class="uploadWrapper">
    <!-- 外面一个框包住里面并列的上传组件和进度条 -->
    <el-upload :class="{hideUpload:hideUpload}" list-type="picture-card" action="#" :file-list="fileList" :on-preview="onPreview" :on-remove="onRemove" :on-change="onChange" :before-upload="beforeUpload" :http-request="uploadImg">
      <i class="el-icon-plus" />
    </el-upload>
    <div v-if="showUploadPercentage" class="progressWrapper">
      <!-- div 撑开, 里面的进度条居中 -->
      <el-progress type="circle" :percentage="percentage" />
    </div>
    <el-dialog :visible="showDialog" title="图片预览">
      <img :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
import { tencentCloud } from '@/private-config'
const cos = new COS(tencentCloud)

export default {
  data() {
    return {
      fileList: [],
      showDialog: false,
      imgUrl: '',
      currentUid: '',
      percentage: 0,
      showUploadPercentage: false
    }
  },
  computed: {
    hideUpload() {
      return this.fileList.length === 1
    }
  },
  methods: {
    onPreview(file) {
      this.showDialog = true
      this.imgUrl = file.url
    },
    onRemove(file, fileList) {
      this.fileList = [...fileList]
    },
    onChange(file, fileList) {
      this.fileList = [...fileList]
    },
    beforeUpload(file) {
      console.log(file)
      const types = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
      if (types.indexOf(file.type) === -1) {
        this.$message.warning('只接受jpg、jpeg、png、gif、bmp的图片类型')
        return false
      }

      const imgSize = 5 * 1024 * 1024
      if (file.size > imgSize) {
        this.$message.warning('上传图片大小不能超过5M')
        return false
      }
      // 上传前记录图片的uid,以便上传成功之后凭借这个标识找到上传的那一张覆盖本地图片的url
      this.currentUid = file.uid
      this.showUploadPercentage = true
      return true
    },
    uploadImg(params) {
      if (params.file) {
        cos.putObject({
          Bucket: 'viva-1304560170',
          Region: 'ap-guangzhou',
          Key: params.file.name,
          Body: params.file,
          StorageClass: 'STANDARD',
          // 箭头函数才能拿到 this
          onProgress: (progressData) => {
            this.percentage = Math.ceil(progressData.percent * 100)
          }
        }, (err, data) => {
          if (!err && data.statusCode === 200) {
            this.fileList = this.fileList.map(item => {
              if (item.uid === this.currentUid) {
                item.url = 'http://' + data.Location
              }
              return item
            })
            console.log(this.showUploadPercentage)
            this.showUploadPercentage = false
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.uploadWrapper {
  width: 148px;
  height: 148px;
  position: relative;
  // 这个overflow: hidden;避免删除图片时加号闪现
  overflow: hidden;
  .progressWrapper {
    // 进度条容器, 撑开 100% 后,内部居中进度条
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff88;
  }
}
::v-deep .hideUpload{
    .el-upload--picture-card{
        display: none;
    }
    img{
        object-fit: cover;
    }
}
.el-dialog__body{
  img{
    width: 100%;
  }
}
::v-deep .el-upload{
  position: relative !important ;
  .el-progress{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 719;
}
}

</style>
